import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';

import LazyLoad from '../components/LazyLoad';

import Auth from './Auth';

const index = () => {
  return (
    <>
      <Routes>
        <Route
          path="/login"
          element={LazyLoad('Login')}
        />
        <Route
          path="/film/*"
          element={LazyLoad('Films')}
        >
          <Route
            path="nowPlaying"
            element={LazyLoad('Films/NowPlaying')}
          />
          <Route
            path="comingSoon"
            element={LazyLoad('Films/ComingSoon')}
          />
          {/* 动态路由 */}
          <Route
            path="detail/:id"
            element={LazyLoad('Films/Detail')}
          />
          <Route
            index
            element={<Navigate to="/film/nowPlaying" />}
          />
        </Route>
        <Route
          path="/cinema"
          element={LazyLoad('Cinema')}
        />
        <Route
          path="/center"
          element={<Auth>{LazyLoad('Center')}</Auth>}
        />

        {/* 重定向 Navigate */}
        <Route
          index
          element={<Navigate to="/film" />}
        />
        {/* 404 */}
        <Route
          path="*"
          element={LazyLoad('NotFound')}
        />
      </Routes>
    </>
  );
};

export default index;
